<template>
  <div class="search-box">
    <slot/>
    <div class="ml15">
      <el-button type="primary"  icon="Search"  @click="search">查 询</el-button>
    </div>
    <div v-if="showMore" class="more" @click="toggle">
      <el-button link type="primary">
        {{isOpen?'折叠':'展开'}}
        <el-icon>
          <ArrowUp v-show="isOpen"/>
          <ArrowDown v-show="!isOpen"/>
        </el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup name="hSearchBar">
const emit = defineEmits()

/** props */
const props = defineProps({
  showMore: {
    required: false,
    type: Boolean,
    default: false
  },
})
/** data */
const isOpen = ref(false)

/** method */
function search(){
  emit('search')
}
function toggle() {
  isOpen.value = !isOpen.value
  emit('toggle', isOpen.value)
}
</script>

<style scoped lang="less">
.search-box {
  //position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: #ffffff;
  &:first-child {
    margin-top: 0;
  }
  ::v-deep(.el-form) {
    margin-bottom: -18px;
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
  }
  .more {
    height: 33px;
    line-height: 33px;
    margin-left: 10px;
    text-align: center;
  }
}
</style>
